<template>
  <!-- 分页 -->
  <div class="page-component">
    <!-- <button class="head-btn" @click="goHead">
      首页
    </button>-->
    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      :total="total"
      :layout="layoutConfig"
      @current-change="currentChange"
      @size-change="sizeChange"
    />
    <!-- <button class="last-btn" @click="goLast">
      尾页
    </button>-->
    <div v-if="layoutConfig.indexOf('jumper') >= 0" class="jump-box mr-3">
      <span>第</span>
      <el-input v-model="jumpPage" size="default" class="mx-2" @keyup.enter="jump" />
      <span>页</span>
    </div>
    <el-button
      v-if="layoutConfig.indexOf('jumper') >= 0"
      type="primary"
      size="default"
      :disabled="total <= pageSize"
      @click="jump"
    >跳转</el-button>
  </div>
</template>

<script>
export default {
  name: 'PageComponent',
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default: [10, 20, 50]
    },
    total: {
      type: Number,
      default: 0
    },
    layoutConfig: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    }
  },
  data () {
    return {
      jumpPage: 1,
      pageSizeHere: 10
    }
  },
  watch: {
    pageSize () {
      this.pageSizeHere = this.pageSize
    }
  },
  mounted () {
    this.pageSizeHere = this.pageSize
  },
  methods: {
    currentChange (value) {
      this.jumpPage = value
      this.$emit('current-change', parseInt(value), this.pageSizeHere)
    },
    sizeChange (val) {
      this.pageSizeHere = Number(val)
      this.currentChange(1)
    },
    goHead () {
      this.currentChange(1)
    },
    goLast () {
      const count = this.total / this.pageSize
      const page = count && this.total % this.pageSize ? parseInt(count) + 1 : parseInt(count)
      this.currentChange(page)
    },
    jump () {
      if (this.total < this.pageSize) return
      if (Math.ceil(this.total / this.pageSize) < this.jumpPage) return
      this.currentChange(this.jumpPage)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~/styles/base.scss";
.page-component {
  display: flex;
  padding: 15px 0;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  position: relative;
  line-height: 28px;
  :deep(.el-pagination) {
    color: $color-base-pagination-text;
  }
  :deep(.el-pagination__jump) {
    display: none;
  }
  .head-btn,
  .last-btn {
    height: 28px;
    padding: 0 8px;
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
    margin: 0 2px;
    outline: none;
    cursor: pointer;
  }
  .jump-box {
    margin-left: 14px;
    .el-input {
      width: 38px;
      height: 28px;
      :deep(input) {
        text-align: center;
        padding: 0 4px !important;
      }
    }
  }
  .btn-type {
    height: 28px;
    padding: 0 14px;
    border-radius: 4px;
    margin: 0 4px;
    outline: none;
    color: #fff;
  }
  .jump-btn {
    background-color: $color-base;
    border: 1px solid $color-base;
    cursor: pointer;
  }
  .disabled-btn {
    background-color: $btn-disabled;
    border: 1px solid $btn-disabled;
    cursor: initial;
  }
}
</style>
